Tailwind Blog Template

## What's implemented - Blog post listing with image, title, author, date and excerpt - Sidebar widgets: search input, categories list, recent posts and archives - Responsive header with desktop nav and mobile menu toggle - Visual pagination controls (UI only) - Simulated data loading in OnInitializedAsync ## Key components - Razor markup with foreach rendering of BlogPostSummaryViewModel - Navigation via NavManager (NavigateToPost stub) - Event handlers using @onclick (ToggleMobileMenu, ShowAlert) - Plain HTML input for search and button controls - View models: BlogPostSummaryViewModel and CategoryViewModel ## How it works - Data is populated in OnInitializedAsync with an in-memory list to simulate fetching. The component binds local lists (blogPosts, categories, recentPosts) and uses foreach to render items. - Navigation actions call NavigateToPost which currently logs a message via ShowAlert; NavManager.NavigateTo is present but commented for real routing. - Mobile menu state is controlled by a bool (isMobileMenuOpen) toggled by ToggleMobileMenu and conditionally renders the mobile nav block. - UI interactions use @onclick with preventDefault for placeholder links; no form model binding or validation is implemented. ## Styling - Tailwind CSS utility classes are used throughout (container, flex, mx-auto, px-*, text-*, bg-*, md:hidden, md:flex, w-2/3, w-1/3). The layout is responsive via Tailwind breakpoints. - Visual elements include shadowed white cards for posts and sidebar widgets, rounded corners and spacing utilities for consistent spacing. ## Reuse steps 1. Add Tailwind CSS to the Blazor project or include the same utility CSS used by the template. 2. Copy Razor file and view models into a Pages or Components folder and register routes as needed. 3. Replace the simulated data in OnInitializedAsync with injected services (e.g., an IPostService) and wire DI in Program.cs. 4. Use NavManager.NavigateTo for real post navigation and inject IJSRuntime or a notification service for alerts. 5. Add server-side paging, search filtering and category filtering in the data service and update the UI handlers to call those APIs. ## Limitations & next steps - This is a single-page UI scaffold generated by Instruct UI; it uses simulated in-memory data and console logging for actions. - No data persistence, authentication, or API integration is included; services and error handling must be added. - Pagination is visual-only; implement backend paging and update navigation handlers to request pages. - Search input and category links are placeholders; wire to filtering logic on the data service or query parameters. - Accessibility and SEO enhancements (semantic landmarks, ARIA attributes, meta tags) and image alt text handling should be reviewed when integrating into a production site.

Tetris Game